<template>
	<view class="wrap">
		<u-toast ref="uToast"></u-toast>
		<view class="head-bj">
			<view class="head-title">
				律师案件管理系统
			</view>
		</view>
		<view class="wechat-login">
			<view class="login-btn">
				<u-button @click="wechatLogin()" shape="circle" icon="weixin-fill" iconColor="#fff"
					color="#06dd6c">微信登录</u-button>
			</view>
		</view>
		<view class="login-foot">
			<view class="hint">
				<u-checkbox-group>
					<u-checkbox :checked="checked" shape="circle" activeColor="#333" size="15"
						@change="getchecked"></u-checkbox>
				</u-checkbox-group>
				<text>已阅读并同意</text>
				<text class="link" @click="privacy">《用户协议、隐私政策》</text>
			</view>
		</view>
		<view class="get-nickname">
			<u-popup :show="nickShow" :round="10" mode="bottom" :closeable="true" @close="nickShow=false"
				closeOnClickOverlay="false" :safeAreaInsetBottom="false" zIndex="99999">
				<view class="avatar">
					<button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
						<u--image shape="circle" :src="avatarUrl" width="85px" height="85px"></u--image>
						<text style="color: #b4b7bb;font-size: 14px;">点击头像更新</text>
					</button>
					<input type="nickname" @blur="userNameInput" class="weui-input" placeholder="请输入昵称" />
					<view class="login-out">
						<u-button color="#1C5AD2" text="立即授权" shape="circle" @click="saveInfo()"></u-button>
					</view>
				</view>
			</u-popup>
		</view>
	</view>
</template>
<script>
	const defaultAvatarUrl =
			'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0'
	import {
		getComRequest
	} from '@/utils/request'
	export default {
		data() {
			return {
				checked: false,
				nickShow: false,
				avatarUrl: defaultAvatarUrl,
				nickName: ""
			}
		},
		methods: {
			getchecked(val) {
				this.checked = val;
			},
			onChooseAvatar(e) {
				const that = this;
				this.avatarUrl = e.detail.avatarUrl;
				// 临时图片转为base64
				// uni.getImageInfo({
				// 	src: this.avatarUrl,
				// 	success: function(res) {
				// 		// 获取到图片的临时地址
				// 		var tempFilePath = res.path;
				// 		// 将图片转为base64格式
				// 		uni.getFileSystemManager().readFile({
				// 			filePath: tempFilePath,
				// 			encoding: 'base64',
				// 			success: function(res) {
				// 				var base64Img = 'data:image/png;base64,' + res.data;
				// 				let userInfo = uni.getStorageSync("user_info")
				// 				userInfo.avatarUrl = base64Img
				// 				uni.setStorageSync("user_info", userInfo)
				// 			}
				// 		});
				// 	}
				// });
			},
			// 点击昵称
			userNameInput(e) {
				this.nickName = e.detail.value
				let userInfo = uni.getStorageSync("user_info")
				userInfo.nickName = e.detail.value
				uni.setStorageSync("user_info", userInfo)
			},
			// 微信登录
			wechatLogin() {
				const that = this;
				if (!this.checked) {
					return this.$refs.uToast.show({
						message: '请先阅读并同意协议',
						type: 'default',
					})
				}
				uni.getUserProfile({
					desc: '登录小程序',
					success: (res) => {
						const userInfo = res.userInfo;
						uni.setStorageSync("user_info", userInfo)
						//由于低版本需要使用getUserProfile方法，高版本使用头像昵称填写功能，所以先使用getUserProfile，如果得到的nickName是微信用户，则说明获取失败，再使用头像昵称填写功能获取
						if (userInfo.nickName == '微信用户') {
							this.nickShow = true;
						}
					}
				});
			},
			async saveInfo() {
				const that = this;
				uni.login({
					provider: 'weixin',
					success: function (loginRes) {
						uni.showLoading({
							title: '授权中...'
						});
						const url = "/api/wx/openid?code=" + loginRes.code;
						getComRequest(url, {}).then((res) => {
							if (res.code == 200) {
								uni.setStorageSync('OPEN-ID', res.data);
								// 调用注册接口
								let userInfo = uni.getStorageSync("user_info")
								if (userInfo.nickName == '微信用户') {
									uni.hideLoading()
									return that.$refs.uToast.show({
										message: '请获取微信信息！',
										type: 'default',
									})
								}
								let data = {
									username: userInfo.nickName,
									nickname: userInfo.nickName,
									openid: res.data,
									description: "助理",
								}
								that.$sendRequest.getRegister(data).then((res) => {
									if (res.code == 200) {
										uni.setStorageSync("Authorization",
											res.data);
										uni.switchTab({
											url: '/pages/index/index'
										})
									} else {
										this.$refs.uToast.show({
											message: res.message,
											type: 'error',
										})
									}
								}).catch(err => {})
								uni.hideLoading()
							} else {
								uni.hideLoading()
								this.$refs.uToast.show({
									message: res.message,
									type: 'error',
								})
							}
						})
					}
				});
			},
			// 查看隐私政策
			privacy() {
				this.$u.route({
					url: 'pages/login/privacy'
				})
			},
		}
	};
</script>
<style lang="scss" scoped>
	.head-bj {
		width: 100%;
		height: 410rpx;
		// background-image: url("~@/static/images/login-bj.png");
		background-size: 100%;
		background-repeat: no-repeat;

		.head-title {
			text-align: center;
			font-size: 48rpx;
			color: #1E1F20;
			padding: 240rpx 0 0 0;
			font-weight: bold;
		}
	}

	.wechat-login {
		width: 100%;
		position: fixed;
		bottom: 320rpx;

		.login-btn {
			width: 80%;
			margin: 0 auto;
			font-size: 30rpx;
		}
	}

	.login-btn /deep/ .u-button {
		font-size: 36rpx;
		color: #fff;
		height: 90rpx;
		line-height: 90rpx;
		font-weight: bold;
		box-shadow: 0px 0px 24px 0px rgba(6, 221, 108, 0.3);
	}
	
	.no-shadow /deep/ .u-button {
		box-shadow: none;
	}

	.login-btn /deep/ .u-icon__icon {
		font-size: 52rpx !important;
	}
	.get-nickname {
		width: 100%;
		padding: 30rpx 30rpx;
		background-color: #fff;
	}
	.get-nickname /deep/ .u-popup__content {
		width: 100%;
		padding: 30rpx 30rpx;
	}
	.avatar-wrapper {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		padding: 30rpx 40rpx;
		background: inherit;
	}
	.avatar-wrapper::after {
		border: none;
	}
	.weui-input {
		padding: 24rpx 0;
		border-bottom: solid 2rpx #eee;
	}
	.login-out /deep/ .u-button{
		margin: 60rpx 0 20rpx 0;
		font-size: 30rpx;
		height: 72rpx;
		line-height: 72rpx;
		box-shadow: 0px 0px 24px 0px rgba(28, 90, 210, 0.31);
	}
</style>